<template>
  <view class="container">
    <uni-card>
      <uni-list>
        <uni-list-item
          v-for="item in listOption"
          :title="item.label"
          :note="editRow[item.prop]"
        >
        </uni-list-item>
      </uni-list>
    </uni-card>
    <uni-card>
      <uni-forms
        ref="formRef"
        label-position="top"
        :model="formData"
        label-width="100vw"
      >
        <template v-for="item in options">
          <uni-forms-item
            :label="item.label"
            :name="item.prop"
            required
            :rules="[
              {
                required: true,
                errorMessage: '字段为必填项',
              },
            ]"
          >
            <uni-easyinput
              v-if="
                item.type == 'text' ||
                item.type == 'input' ||
                item.type == 'textarea'
              "
              type="text"
              v-model="formData[item.prop]"
            />
            <uni-data-select
              v-else-if="item.type == 'select'"
              v-model="formData[item.prop]"
              :localdata="item.optionItems"
            ></uni-data-select>
            <uni-data-select
              v-else-if="item.type == 'select'"
              v-model="formData[item.prop]"
              :localdata="item.selectOptions"
            ></uni-data-select>
            <uni-datetime-picker
              v-else-if="
                ['datetime', 'date', 'datetimerange', 'daterange'].includes(
                  item.type
                )
              "
              :type="item.type"
              v-model="formData[item.prop]"
            />

            <uni-data-checkbox
              v-else-if="item.type == 'radio' || item.type == 'checkbox'"
              v-model="formData[item.prop]"
              :localdata="item.optionItems"
              :multiple="item.type == 'checkbox'"
            ></uni-data-checkbox>
          </uni-forms-item>
        </template>
        <uni-forms-item label="现场照片">
          <Camera v-model="files" :limit="5"> </Camera>
        </uni-forms-item>
        <uni-forms-item label="隐患上报">
          <button type="danger" size="mini" @click="onShangbao">
            上报隐患
          </button>
        </uni-forms-item>
      </uni-forms>
    </uni-card>
    <button class="bottom" type="primary" @click="onSubmit">提 交</button>
  </view>
</template>
<script>
export default {
  data() {
    return {
      row: {},
    };
  },
  onLoad(payload) {
    this.row = JSON.parse(decodeURIComponent(payload.row));
  },
};
</script>
<script setup>
import { ref, getCurrentInstance, onMounted, watch } from "vue";
import { useFormJson } from "@/hooks/jsonToForm.js";
import { router } from "@/router/index.js";
import { taskPoints } from "@/api/znxj/xjrw.js";
import Camera from "@/components/camera.vue";
const formData = ref({});

const formRef = ref();
const editRow = ref({});
const onSubmit = async (data) => {
  try {
    const res = await formRef.value.validate();
    taskPoints
      .update({
        ...editRow.value,
        formData: JSON.stringify(res),
        hiddenFileId: hiddenFileId.value,
        planTaskDetailsFileList: null,
      })
      .then((res) => {
        uni.showToast({
          title: "修改成功",
          icon: "success",
        });
        setTimeout(() => {
          router.back();
        }, 500);
      });
  } catch (e) {
    return false;
  }
};
const onShangbao = () => {
  router.toPage({
    path: "/pages/yhpc/yhdj/components/dj",
    params: {
      inspectionPlanTaskId: editRow.value.planTaskId,
      inspectionPlanTaskPointId: editRow.value.id,
      tempType: 0,
    },
  });
};
const options = ref();
const listOption = ref([
  {
    label: "点位名称",
    prop: "pointName",
  },
  {
    label: "点位编号",
    prop: "pointCode",
  },
]);
const initData = () => {
  const { row } = getCurrentInstance().data;
  console.log(row);
  editRow.value = row;
  options.value = useFormJson(JSON.parse(row.formJson), {
    sort: [],
    sortable: [],
  });
  try {
    formData.value = row.formData ? JSON.parse(row.formData) : {};
    files.value = row.planTaskDetailsFileList || [];
  } catch (e) {
    formData.value = {};
    files.value = [];
  }
};
onMounted(() => {
  initData();
});
// onShow(() => {
//   initData();
// });

// 文件
const files = ref([]);
const hiddenFileId = ref("");
watch(
  () => files,
  (newData) => {
    if (newData.value.length === 0) {
      hiddenFileId.value = "";
    } else {
      hiddenFileId.value = newData.value.map((item) => item.id).join(",");
    }
  },
  {
    deep: true,
  }
);
</script>

<style lang="scss">
page {
  background-color: #fff !important;
}

.container {
  padding: 6px;
}

.footer {
  position: fixed;
  bottom: $uni-spacing-col-lg;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  font-size: $uni-font-size-sm;
}

.navbar {
  display: flex;
  height: 40px;
  padding: 0 5px;
  background: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 10;

  .nav-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 15px;
    position: relative;

    &.current {
      color: blue;

      &:after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 44px;
        height: 0;
        // border-bottom: 2px solid $base-color;
      }
    }
  }
}
</style>
